<template>
  <portal :to="to">
    <div class="drawer-container" v-show="open">
      <div class="drawer-mask"></div>
      <div class="drawer" v-clickoutside="close">
        <div class="drawer-header">
          <template v-if="!!$slots.header">
            <slot name="header"></slot>
          </template>
          <template v-else>{{title}}</template>
          <a class="close" href="javascript:;" @click="close">
            <IconPlus color="#000" :size="80" />
          </a>
        </div>
        <div class="drawer-body">
          <slot></slot>
        </div>
        <div class="drawer-footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
  </portal>
</template>
<script>
import ClickOutSide from "@/common/clickoutside";
import IconPlus from "./IconPlus";

export default {
  components: { IconPlus },
  directives: {
    clickoutside: ClickOutSide
  },
  props: {
    open: false,
    to: {
      type: String,
      default: "drawer-container"
    },
    title: {
      type: String,
      default: ""
    }
  },
  created() {
    let index = this.$root.portals.findIndex(o => o === this.to);
    if (index > -1) {
      this.$root.portals.splice(index, 1);
    }
    this.$root.portals.push(this.to);
  },
  beforeDestroy() {
    let index = this.$root.portals.findIndex(o => o === this.to);
    if (index > -1) {
      this.$root.portals.splice(index, 1);
    }
  },
  methods: {
    close() {
      this.open && this.$emit("close");
    }
  }
};
</script>
<style lang="stylus">
.drawer-container {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.drawer-mask {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.2);
}

.drawer {
  width: 1024px;
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0;
  background: white;
  box-shadow: 0px 14px 42px 9px rgba(4, 20, 58, 0.29);
  border-radius: 50px 0px 0px 50px;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .drawer-header {
    height: 290px;
    line-height: 290px;
    font-size: 70px;
    margin: 0 0 0 100px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    position: relative;

    .close {
      height: 80px;
      width: 80px;
      position: absolute;
      right: 50px;
      top: 50px;
      transform: rotate(45deg);
      font-size: 0;
      line-height: 1;
    }
  }

  .drawer-body {
    flex: 1;
    overflow: hidden;
  }

  .drawer-footer {
    height: 366px;
  }
}
</style>